<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>京东</title>
	<style type="text/css">
     *{
     	padding: 0;
     	margin: 0;
     }
     body,html{
     	height: 100%;
     }
     body{
     	display: flex;
     	flex-direction: column;
     }
     header{
       height: 45px;
       background-color: gray;
     }
     header ul{
     	display: flex;
     	list-style: none;
        overflow: auto;
     }
     header ul>li{
     	flex-shrink:0;
     	line-height: 45px;
     	padding: 0 10px;
     	color: white;
     }
     header ul>li:hover{
     	background-color: white;
     	color: red;
     }
     section{
     	flex: 1;
     	display: flex;
     	overflow: auto;
     }
     section ul{
     	list-style: none;
     	overflow: auto;
     }
     section ul>li{
        height: 45px;
        width: 85px;
        font-size: 13px;
        background-color:#f8f8f8 ;
        line-height: 45px;
        text-align: center;
     }
     section ul>li:hover{
     	background-color: #ffffff;
     	color:#e93b3d ;
     }
     section .box{
     	flex: 1;
     	display: flex;
     	overflow:auto;
     	flex-direction: column;
     	position:relative;
     }
     section .box>p{
     	height: 48px;
     	font-size: 13px;
     	font-weight: bold;
     	line-height: 48px;
     	padding-left: 8px;
        position: sticky;
        top: 0px;
        background-color: #ffffff;
     }
     section .box>div{
        flex: 1;
        flex-wrap: wrap;
     	align-content: flex-start;
     	display: flex;
     }
     section .box>div>div{
     	width: 33.3%;
     	height: 70px;
     	text-align: center;
     	font-size: 11px;
     	padding:9px 0;
     }
     section .box>div>div img{
     	width: 61px;
     }
     footer{
     	height: 50px;
     	background-color: gray;
     }
     ::-webkit-scrollbar{
     	display: none;
     }
	</style>
</head>
<body>
	<header>
		<ul>
			<li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li>
		</ul>
	</header>
	<section>
		<ul>
			<li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li><li>热门推荐</li>
		</ul>
		<div class="box">
			<p>热门推荐</p>
			<div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
				<div>
					<img src="pic1.png">
					<p>空调</p>
				</div>
			</div>
		</div>
	</section>
	<footer></footer>
</body>
</html>